import { useState, useEffect, useMemo, useCallback, memo, useRef } from "react";
import {
	CheckCircle,
	Clock,
	XCircle,
	Loader2,
	MoreVertical,
	Hash,
	Trash2,
	StopCircle,
	ChevronUp,
	ChevronDown,
	ChevronsUpDown,
	Search,
	ChevronLeft,
	ChevronRight,
	ChevronsLeft,
	ChevronsRight,
	MessageCircle,
} from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";

// Custom SVG icons for transcription actions
const QuickTranscribeIcon = ({ className }: { className?: string }) => (
	<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
		<path d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z" />
		<path d="M8 12h8" strokeWidth="1.5" />
		<path d="M8 16h6" strokeWidth="1.5" />
	</svg>
);

const AdvancedTranscribeIcon = ({ className }: { className?: string }) => (
	<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
		<circle cx="12" cy="12" r="3" />
		<path d="M12 1v6m0 6v6" />
		<path d="m21 12-6 0m-6 0-6 0" />
		<path d="m16.24 7.76-4.24 4.24m-4.24 4.24-1.41-1.41" />
		<path d="M16.24 16.24 12 12m-4.24-4.24L6.34 6.34" />
	</svg>
);
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { TranscriptionConfigDialog, type WhisperXParams } from "./TranscriptionConfigDialog";
import { TranscribeDDialog } from "./TranscribeDDialog";
import { useRouter } from "../contexts/RouterContext";
import { useAuth } from "../contexts/AuthContext";
import {
	useReactTable,
	getCoreRowModel,
	getSortedRowModel,
	flexRender,
	type ColumnDef,
	type SortingState,
	type ColumnFiltersState,
} from "@tanstack/react-table";


// Debounced search input component to prevent focus loss
function DebouncedSearchInput({
	value,
	onChange,
	placeholder,
	className
}: {
	value: string;
	onChange: (value: string) => void;
	placeholder: string;
	className: string;
}) {
	const [searchValue, setSearchValue] = useState(value);

	// Update internal state when external value changes
	useEffect(() => {
		setSearchValue(value);
	}, [value]);

	// Debounce the onChange callback
	useEffect(() => {
		const timeoutId = setTimeout(() => {
			onChange(searchValue);
		}, 300);

		return () => clearTimeout(timeoutId);
	}, [searchValue, onChange]);

	return (
		<Input
			placeholder={placeholder}
			value={searchValue}
			onChange={(e) => setSearchValue(e.target.value)}
			className={className}
		/>
	);
}

interface AudioFile {
	id: string;
	title?: string;
	status: "uploaded" | "pending" | "processing" | "completed" | "failed";
	created_at: string;
	audio_path: string;
	diarization?: boolean;
	is_multi_track?: boolean;
	error_message?: string;
	individual_transcripts?: any;
}

interface AudioFilesTableProps {
	refreshTrigger: number;
	onTranscribe?: (jobId: string) => void;
}

interface PaginationResponse {
	jobs: AudioFile[];
	pagination: {
		page: number;
		limit: number;
		total: number;
		pages: number;
	};
}


export const AudioFilesTable = memo(function AudioFilesTable({
	refreshTrigger,
	onTranscribe,
}: AudioFilesTableProps) {
	const { navigate } = useRouter();
	const { getAuthHeaders } = useAuth();
	const [data, setData] = useState<AudioFile[]>([]);
	const [loading, setLoading] = useState(true);
	const [isPageChanging, setIsPageChanging] = useState(false);
	const [pagination, setPagination] = useState({
		pageIndex: 0,
		pageSize: 10,
	});
	const [sorting, setSorting] = useState<SortingState>([
		{ id: "created_at", desc: true }
	]);
	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
	const [globalFilter, setGlobalFilter] = useState("");
	const [queuePositions, setQueuePositions] = useState<Record<string, number>>({});
	const [openPopovers, setOpenPopovers] = useState<Record<string, boolean>>({});
	const [rowSelection, setRowSelection] = useState({});
	const [bulkActionLoading, setBulkActionLoading] = useState(false);
	const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
	const [totalItems, setTotalItems] = useState(0);
	const [pageCount, setPageCount] = useState(0);
	const [configDialogOpen, setConfigDialogOpen] = useState(false);
	const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
	const [transcriptionLoading, setTranscriptionLoading] = useState(false);
	const [killingJobs, setKillingJobs] = useState<Set<string>>(new Set());
	const [transcribeDDialogOpen, setTranscribeDDialogOpen] = useState(false);
	const [trackProgress, setTrackProgress] = useState<Record<string, any>>({});

	// Dialog state management (moved outside table to prevent re-renders)
	const [stopDialogOpen, setStopDialogOpen] = useState(false);
	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
	const [selectedFile, setSelectedFile] = useState<AudioFile | null>(null);

	const fetchAudioFiles = useCallback(async (page?: number, limit?: number, searchQuery?: string, isInitialLoad = false, isPolling = false) => {
		try {
			// Only show loading skeleton on initial load, use page changing indicator for pagination
			if (isInitialLoad) {
				setLoading(true);
			} else if (!isPolling) {
				// Only show loading indicator for user-triggered actions, not polling
				setIsPageChanging(true);
			}

			const currentPage = page || pagination.pageIndex + 1;
			const currentLimit = limit || pagination.pageSize;
			const currentSearch = searchQuery !== undefined ? searchQuery : globalFilter;

			const params = new URLSearchParams({
				page: currentPage.toString(),
				limit: currentLimit.toString(),
			});

			// Add search parameter if provided
			if (currentSearch) {
				params.set('q', currentSearch);
			}

			// Add sorting parameters
			if (sorting.length > 0) {
				params.set('sort_by', sorting[0].id);
				params.set('sort_order', sorting[0].desc ? 'desc' : 'asc');
			}

			const response = await fetch(`/api/v1/transcription/list?${params}`, {
				headers: {
					...getAuthHeaders(),
				},
			});

			if (response.ok) {
				const result: PaginationResponse = await response.json();

				// Smart update: Only update status fields during polling to preserve UI state
				if (isPolling) {
					setData(prevData => {
						const newJobs = result.jobs || [];

						// Update existing jobs if their status changed
						const updatedData = prevData.map(existingJob => {
							const updatedJob = newJobs.find(j => j.id === existingJob.id);
							if (updatedJob) {
								// Only update if anything actually changed (mainly status)
								const hasChanges =
									updatedJob.status !== existingJob.status ||
									updatedJob.error_message !== existingJob.error_message ||
									JSON.stringify(updatedJob.individual_transcripts) !== JSON.stringify(existingJob.individual_transcripts);

								if (hasChanges) {
									return { ...existingJob, ...updatedJob };
								}
							}
							return existingJob; // Keep existing reference if no change
						});

						// Add any new jobs that appeared
						const existingIds = new Set(prevData.map(job => job.id));
						const newJobsToAdd = newJobs.filter(job => !existingIds.has(job.id));

						return [...updatedData, ...newJobsToAdd];
					});
				} else {
					// Full replacement for user-triggered actions
					setData(result.jobs || []);
				}

				setTotalItems(result.pagination.total);
				setPageCount(result.pagination.pages);
				// Fetch queue positions for pending jobs
				fetchQueuePositions(result.jobs || []);

				// Fetch track progress for multi-track jobs that are processing
				const processingMultiTrackJobs = (result.jobs || []).filter(job =>
					job.is_multi_track && (job.status === "processing" || job.status === "pending")
				);

				if (processingMultiTrackJobs.length > 0) {
					try {
						const progressPromises = processingMultiTrackJobs.map(async (job) => {
							const response = await fetch(`/api/v1/transcription/${job.id}/track-progress`, {
								headers: {
									...getAuthHeaders(),
								},
							});
							if (response.ok) {
								const progress = await response.json();
								return { jobId: job.id, progress };
							}
							return null;
						});

						const results = await Promise.all(progressPromises);
						const progressData: Record<string, any> = {};

						results.forEach(result => {
							if (result) {
								progressData[result.jobId] = result.progress;
							}
						});

						setTrackProgress(progressData);
					} catch (error) {
						console.error("Failed to fetch track progress:", error);
					}
				}
			}
		} catch (error) {
			console.error("Failed to fetch audio files:", error);
		} finally {
			setLoading(false);
			setIsPageChanging(false);
		}
	}, [pagination.pageIndex, pagination.pageSize, globalFilter, sorting, getAuthHeaders]);

	// Fetch queue positions for pending jobs
	const fetchQueuePositions = async (jobs: AudioFile[]) => {
		const pendingJobs = jobs.filter((job) => job.status === "pending");
		if (pendingJobs.length === 0) return;

		try {
			const response = await fetch("/api/v1/admin/queue/stats", {
				headers: {
					...getAuthHeaders(),
				},
			});

			if (response.ok) {
				// For now, use simple position calculation
				const positions: Record<string, number> = {};
				pendingJobs.forEach((job, index) => {
					positions[job.id] = index + 1; // Simple position calculation
				});
				setQueuePositions(positions);
			}
		} catch (error) {
			console.error("Failed to fetch queue positions:", error);
		}
	};

	// Handle transcribe action - opens configuration dialog
	const handleTranscribe = useCallback((jobId: string) => {
		const job = data.find((f) => f.id === jobId);
		if (!job) return;

		// Close the popover
		setOpenPopovers((prev) => ({ ...prev, [jobId]: false }));

		// Open configuration dialog
		setSelectedJobId(jobId);
		setConfigDialogOpen(true);
	}, [data]);

	// Handle transcribe-D action - opens profile selection dialog
	const handleTranscribeD = useCallback((jobId: string) => {
		const job = data.find((f) => f.id === jobId);
		if (!job) return;

		// Close the popover
		setOpenPopovers((prev) => ({ ...prev, [jobId]: false }));

		// Open Transcribe-D dialog
		setSelectedJobId(jobId);
		setTranscribeDDialogOpen(true);
	}, [data]);

	// Handle actual transcription start with parameters
	const handleStartTranscription = useCallback(async (params: WhisperXParams) => {
		if (!selectedJobId) return;

		// Validate multi-track compatibility
		const selectedJob = data.find(job => job.id === selectedJobId);
		if (selectedJob?.is_multi_track && !params.is_multi_track_enabled) {
			alert("Multi-track audio requires a profile with multi-track transcription enabled. Please select or create a profile with multi-track support.");
			return;
		}

		if (!selectedJob?.is_multi_track && params.is_multi_track_enabled) {
			alert("Multi-track transcription cannot be used with single-track audio files.");
			return;
		}

		try {
			setTranscriptionLoading(true);

			const response = await fetch(`/api/v1/transcription/${selectedJobId}/start`, {
				method: "POST",
				headers: {
					...getAuthHeaders(),
					"Content-Type": "application/json",
				},
				body: JSON.stringify(params),
			});

			if (response.ok) {
				// Close dialog and refresh
				setConfigDialogOpen(false);
				setSelectedJobId(null);
				fetchAudioFiles();
				if (onTranscribe) {
					onTranscribe(selectedJobId);
				}
			} else {
				alert("Failed to start transcription");
			}
		} catch {
			alert("Error starting transcription");
		} finally {
			setTranscriptionLoading(false);
		}
	}, [selectedJobId, fetchAudioFiles, onTranscribe]);

	// Handle actual transcription start with profile parameters
	const handleStartTranscriptionWithProfile = useCallback(async (params: WhisperXParams, _profileId?: string) => {
		if (!selectedJobId) return;

		// Validate multi-track compatibility
		const selectedJob = data.find(job => job.id === selectedJobId);
		if (selectedJob?.is_multi_track && !params.is_multi_track_enabled) {
			alert("Multi-track audio requires a profile with multi-track transcription enabled. Please select a different profile with multi-track support.");
			return;
		}

		if (!selectedJob?.is_multi_track && params.is_multi_track_enabled) {
			alert("Multi-track transcription cannot be used with single-track audio files. Please select a different profile.");
			return;
		}

		try {
			setTranscriptionLoading(true);

			const response = await fetch(`/api/v1/transcription/${selectedJobId}/start`, {
				method: "POST",
				headers: {
					...getAuthHeaders(),
					"Content-Type": "application/json",
				},
				body: JSON.stringify(params),
			});

			if (response.ok) {
				// Close dialog and refresh
				setTranscribeDDialogOpen(false);
				setSelectedJobId(null);
				fetchAudioFiles();
				if (onTranscribe) {
					onTranscribe(selectedJobId);
				}
			} else {
				alert("Failed to start transcription");
			}
		} catch {
			alert("Error starting transcription");
		} finally {
			setTranscriptionLoading(false);
		}
	}, [selectedJobId, fetchAudioFiles, onTranscribe]);

	// Check if job can be transcribed (not currently processing or pending)
	const canTranscribe = useCallback((file: AudioFile) => {
		return file.status !== "processing" && file.status !== "pending";
	}, []);

	// Handle delete action
	const handleDelete = useCallback(async (jobId: string) => {
		// Close the popover
		setOpenPopovers((prev) => ({ ...prev, [jobId]: false }));

		try {
			const response = await fetch(`/api/v1/transcription/${jobId}`, {
				method: "DELETE",
				headers: {
					...getAuthHeaders(),
				},
			});

			if (response.ok) {
				// Refresh to show updated list
				fetchAudioFiles();
			} else {
				alert("Failed to delete audio file");
			}
		} catch {
			alert("Error deleting audio file");
		}
	}, [fetchAudioFiles]);

	// Handle kill action
	const handleKillJob = useCallback(async (jobId: string) => {
		// Close the popover
		setOpenPopovers((prev) => ({ ...prev, [jobId]: false }));

		try {
			setKillingJobs((prev) => new Set(prev).add(jobId));

			const response = await fetch(`/api/v1/transcription/${jobId}/kill`, {
				method: "POST",
				headers: {
					...getAuthHeaders(),
				},
			});

			if (response.ok) {
				// Refresh to show updated status
				fetchAudioFiles();
			} else {
				alert("Failed to kill transcription job");
			}
		} catch {
			alert("Error killing transcription job");
		} finally {
			setKillingJobs((prev) => {
				const newSet = new Set(prev);
				newSet.delete(jobId);
				return newSet;
			});
		}
	}, [fetchAudioFiles]);

	// Bulk Actions Handlers
	const handleBulkTranscribe = useCallback(async (params: WhisperXParams) => {
		const selectedIds = Object.keys(rowSelection);
		if (selectedIds.length === 0) return;

		setBulkActionLoading(true);
		try {
			// Process sequentially to avoid overwhelming the server
			for (const id of selectedIds) {
				const job = data.find(j => j.id === id);
				if (!job) continue;

				// Skip if multi-track mismatch
				if (job.is_multi_track && !params.is_multi_track_enabled) continue;
				if (!job.is_multi_track && params.is_multi_track_enabled) continue;

				await fetch(`/api/v1/transcription/${id}/start`, {
					method: "POST",
					headers: {
						...getAuthHeaders(),
						"Content-Type": "application/json",
					},
					body: JSON.stringify(params),
				});
			}

			// Clear selection and refresh
			setRowSelection({});
			setConfigDialogOpen(false);
			setTranscribeDDialogOpen(false);
			fetchAudioFiles();
		} catch (error) {
			console.error("Bulk transcribe error:", error);
			alert("Error processing bulk transcription");
		} finally {
			setBulkActionLoading(false);
		}
	}, [rowSelection, data, getAuthHeaders, fetchAudioFiles]);

	const handleBulkDelete = useCallback(async () => {
		const selectedIds = Object.keys(rowSelection);
		if (selectedIds.length === 0) return;

		setBulkActionLoading(true);
		try {
			// Process sequentially
			for (const id of selectedIds) {
				await fetch(`/api/v1/transcription/${id}`, {
					method: "DELETE",
					headers: {
						...getAuthHeaders(),
					},
				});
			}

			// Clear selection and refresh
			setRowSelection({});
			setBulkDeleteDialogOpen(false);
			fetchAudioFiles();
		} catch (error) {
			console.error("Bulk delete error:", error);
			alert("Error processing bulk delete");
		} finally {
			setBulkActionLoading(false);
		}
	}, [rowSelection, getAuthHeaders, fetchAudioFiles]);

	// Modified handlers to support bulk actions
	const onStartTranscribe = (params: WhisperXParams) => {
		if (Object.keys(rowSelection).length > 0) {
			handleBulkTranscribe(params);
		} else {
			handleStartTranscription(params);
		}
	};

	const onStartTranscribeWithProfile = (params: WhisperXParams) => {
		if (Object.keys(rowSelection).length > 0) {
			handleBulkTranscribe(params);
		} else {
			handleStartTranscriptionWithProfile(params);
		}
	};

	// Initial load
	useEffect(() => {
		const isInitialLoad = data.length === 0;
		fetchAudioFiles(undefined, undefined, undefined, isInitialLoad);
	}, [refreshTrigger, fetchAudioFiles]);

	// Handle pagination, search, and sorting changes
	useEffect(() => {
		if (data.length > 0) { // Only fetch if not initial load
			fetchAudioFiles(
				pagination.pageIndex + 1,
				pagination.pageSize,
				globalFilter || undefined
			);
		}
	}, [pagination.pageIndex, pagination.pageSize, globalFilter, sorting, fetchAudioFiles]);

	// Reset to first page when search changes
	useEffect(() => {
		if (globalFilter !== undefined) {
			setPagination(prev => ({ ...prev, pageIndex: 0 }));
		}
	}, [globalFilter]);

	// Smart polling: only poll when there are active jobs and increase interval when idle
	const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);

	useEffect(() => {
		const activeJobs = data.filter(
			(job) => job.status === "pending" || job.status === "processing",
		);

		// Clear any existing polling interval
		if (pollingIntervalRef.current) {
			clearInterval(pollingIntervalRef.current);
			pollingIntervalRef.current = null;
		}

		// Only poll if there are active jobs
		if (activeJobs.length > 0) {
			// Use shorter interval for processing jobs, longer for pending jobs
			const hasProcessingJobs = activeJobs.some(job => job.status === "processing");
			const pollingInterval = hasProcessingJobs ? 2000 : 5000; // 2s for processing, 5s for pending

			pollingIntervalRef.current = setInterval(() => {
				// Keep current pagination when polling, but don't show loading indicators
				fetchAudioFiles(undefined, undefined, undefined, false, true);
			}, pollingInterval);
		}

		return () => {
			if (pollingIntervalRef.current) {
				clearInterval(pollingIntervalRef.current);
				pollingIntervalRef.current = null;
			}
		};
	}, [data, fetchAudioFiles]);

	const getStatusIcon = useCallback((file: AudioFile) => {
		const iconSize = 16;
		const status = file.status;
		const queuePosition = queuePositions[file.id];
		const progress = trackProgress[file.id];

		// Special handling for multi-track jobs that are processing
		if (file.is_multi_track && status === "processing" && progress) {
			const { progress: progressInfo, tracks } = progress;
			const percentage = Math.round(progressInfo.percentage || 0);
			const completedTracks = progressInfo.completed_tracks || 0;
			const totalTracks = progressInfo.total_tracks || 0;

			return (
				<Tooltip>
					<TooltipTrigger asChild>
						<div className="cursor-help inline-flex items-center gap-1">
							<div className="relative">
								<Loader2 size={iconSize} className="text-primary animate-spin" />
							</div>
							<span className="text-xs text-primary font-medium">
								{completedTracks}/{totalTracks}
							</span>
						</div>
					</TooltipTrigger>
					<TooltipContent className="bg-popover border-border text-popover-foreground">
						<div className="space-y-1">
							<p>Multi-Track Processing ({percentage}%)</p>
							<div className="space-y-1">
								{tracks && tracks.slice(0, 5).map((track: any, index: number) => (
									<div key={index} className="flex items-center gap-2 text-xs">
										<span className={`w-2 h-2 rounded-full ${track.status === 'completed' ? 'bg-emerald-400' :
											track.status === 'processing' ? 'bg-amber-400' :
												'bg-stone-400'
											}`}></span>
										<span>{track.track_name}</span>
									</div>
								))}
								{tracks && tracks.length > 5 && (
									<p className="text-xs text-carbon-400">...and {tracks.length - 5} more</p>
								)}
							</div>
						</div>
					</TooltipContent>
				</Tooltip>
			);
		}

		switch (status) {
			case "completed":
				return (
					<Tooltip>
						<TooltipTrigger asChild>
							<div className="cursor-help inline-block">
								<CheckCircle size={iconSize} className="text-green-500" />
							</div>
						</TooltipTrigger>
						<TooltipContent className="bg-popover border-border text-popover-foreground">
							<p>Completed</p>
						</TooltipContent>
					</Tooltip>
				);
			case "processing":
				return (
					<Tooltip>
						<TooltipTrigger asChild>
							<div className="cursor-help inline-block">
								<Loader2
									size={iconSize}
									className="text-primary animate-spin"
								/>
							</div>
						</TooltipTrigger>
						<TooltipContent className="bg-popover border-border text-popover-foreground">
							<p>Processing</p>
						</TooltipContent>
					</Tooltip>
				);
			case "failed":
				return (
					<Tooltip>
						<TooltipTrigger asChild>
							<div className="cursor-help inline-block">
								<XCircle size={iconSize} className="text-destructive" />
							</div>
						</TooltipTrigger>
						<TooltipContent className="bg-popover border-border text-popover-foreground">
							<p>Failed</p>
						</TooltipContent>
					</Tooltip>
				);
			case "pending":
				return (
					<Tooltip>
						<TooltipTrigger asChild>
							<div className="flex items-center gap-1 cursor-help inline-flex">
								<Hash size={12} className="text-muted-foreground" />
								<span className="text-xs text-muted-foreground font-medium">
									{queuePosition || "?"}
								</span>
							</div>
						</TooltipTrigger>
						<TooltipContent className="bg-popover border-border text-popover-foreground">
							<p>Queued (Position {queuePosition || "?"})</p>
						</TooltipContent>
					</Tooltip>
				);
			case "uploaded":
			default:
				return (
					<Tooltip>
						<TooltipTrigger asChild>
							<div className="cursor-help inline-block">
								<Clock size={iconSize} className="text-muted-foreground" />
							</div>
						</TooltipTrigger>
						<TooltipContent className="bg-popover border-border text-popover-foreground">
							<p>Uploaded</p>
						</TooltipContent>
					</Tooltip>
				);
		}
	}, [queuePositions, trackProgress]);

	const formatDate = useCallback((dateString: string) => {
		return new Date(dateString).toLocaleDateString("en-US", {
			year: "numeric",
			month: "short",
			day: "numeric",
			hour: "2-digit",
			minute: "2-digit",
		});
	}, []);

	const getFileName = useCallback((audioPath: string) => {
		const parts = audioPath.split("/");
		return parts[parts.length - 1];
	}, []);

	const handleAudioClick = useCallback((audioId: string) => {
		navigate({ path: 'audio-detail', params: { id: audioId } });
	}, [navigate]);

	// Memoize column definitions to prevent recreation on every render
	const columns = useMemo<ColumnDef<AudioFile>[]>(
		() => [
			{
				id: "select",
				header: ({ table }) => (
					<div className={`transition-opacity duration-200 ${table.getIsSomeRowsSelected() || table.getIsAllRowsSelected() ? 'opacity-100' : 'opacity-0 group-hover/header:opacity-100'}`}>
						<Checkbox
							checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
							onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
							aria-label="Select all"
							className="translate-y-[2px]"
						/>
					</div>
				),
				cell: ({ row }) => (
					<div className={`transition-opacity duration-200 ${row.getIsSelected() ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'}`}>
						<Checkbox
							checked={row.getIsSelected()}
							onCheckedChange={(value) => row.toggleSelected(!!value)}
							aria-label="Select row"
							className="translate-y-[2px]"
						/>
					</div>
				),
				enableSorting: false,
				enableHiding: false,
			},
			{
				accessorFn: (row) => row.title || getFileName(row.audio_path),
				id: "title",
				header: ({ column }) => {
					return (
						<Button
							variant="ghost"
							onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
							className="h-auto p-0 font-medium"
						>
							Title
							{column.getIsSorted() === "asc" ? (
								<ChevronUp className="ml-2 h-4 w-4" />
							) : column.getIsSorted() === "desc" ? (
								<ChevronDown className="ml-2 h-4 w-4" />
							) : (
								<ChevronsUpDown className="ml-2 h-4 w-4" />
							)}
						</Button>
					);
				},
				cell: ({ row }) => {
					const file = row.original;
					return (
						<div className="relative flex items-center justify-between w-full group/title">
							<button
								onClick={() => handleAudioClick(file.id)}
								className="text-foreground font-medium hover:text-primary transition-colors cursor-pointer text-left font-inter truncate pr-8"
							>
								{file.title || getFileName(file.audio_path)}
							</button>

							{/* Desktop Hover Actions Toolbar */}
							<div className="hidden lg:flex absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/row:opacity-100 transition-opacity duration-200 items-center gap-1 bg-white/90 dark:bg-carbon-800/90 backdrop-blur-sm shadow-sm border border-carbon-200 dark:border-carbon-700 rounded-md px-1 py-0.5 z-10">
								{file.status === "completed" && (
									<Tooltip>
										<TooltipTrigger asChild>
											<Button
												variant="ghost"
												size="icon"
												className="h-7 w-7 text-carbon-600 dark:text-carbon-400 hover:text-primary hover:bg-carbon-100 dark:hover:bg-carbon-700"
												onClick={(e) => {
													e.stopPropagation();
													navigate({ path: 'chat', params: { audioId: file.id } });
												}}
											>
												<MessageCircle className="h-4 w-4" />
											</Button>
										</TooltipTrigger>
										<TooltipContent>Open Chat</TooltipContent>
									</Tooltip>
								)}

								<Tooltip>
									<TooltipTrigger asChild>
										<Button
											variant="ghost"
											size="icon"
											className="h-7 w-7 text-carbon-600 dark:text-carbon-400 hover:text-primary hover:bg-carbon-100 dark:hover:bg-carbon-700 disabled:opacity-50"
											disabled={!canTranscribe(file)}
											onClick={(e) => {
												e.stopPropagation();
												handleTranscribeD(file.id);
											}}
										>
											<QuickTranscribeIcon className="h-4 w-4" />
										</Button>
									</TooltipTrigger>
									<TooltipContent>Transcribe</TooltipContent>
								</Tooltip>

								<Tooltip>
									<TooltipTrigger asChild>
										<Button
											variant="ghost"
											size="icon"
											className="h-7 w-7 text-carbon-600 dark:text-carbon-400 hover:text-primary hover:bg-carbon-100 dark:hover:bg-carbon-700 disabled:opacity-50"
											disabled={!canTranscribe(file)}
											onClick={(e) => {
												e.stopPropagation();
												handleTranscribe(file.id);
											}}
										>
											<AdvancedTranscribeIcon className="h-4 w-4" />
										</Button>
									</TooltipTrigger>
									<TooltipContent>Transcribe+</TooltipContent>
								</Tooltip>

								{file.status === "processing" && (
									<Tooltip>
										<TooltipTrigger asChild>
											<Button
												variant="ghost"
												size="icon"
												className="h-7 w-7 text-orange-500 dark:text-orange-400 hover:text-orange-600 dark:hover:text-orange-300 hover:bg-orange-50 dark:hover:bg-orange-900/20"
												disabled={killingJobs.has(file.id)}
												onClick={(e) => {
													e.stopPropagation();
													setSelectedFile(file);
													setStopDialogOpen(true);
												}}
											>
												{killingJobs.has(file.id) ? (
													<Loader2 className="h-4 w-4 animate-spin" />
												) : (
													<StopCircle className="h-4 w-4" />
												)}
											</Button>
										</TooltipTrigger>
										<TooltipContent>Stop Transcription</TooltipContent>
									</Tooltip>
								)}

								<Tooltip>
									<TooltipTrigger asChild>
										<Button
											variant="ghost"
											size="icon"
											className="h-7 w-7 text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20"
											onClick={(e) => {
												e.stopPropagation();
												setSelectedFile(file);
												setDeleteDialogOpen(true);
											}}
										>
											<Trash2 className="h-4 w-4" />
										</Button>
									</TooltipTrigger>
									<TooltipContent>Delete</TooltipContent>
								</Tooltip>
							</div>
						</div>
					);
				},
				enableGlobalFilter: false,
			},
			{
				accessorKey: "created_at",
				header: ({ column }) => {
					return (
						<Button
							variant="ghost"
							onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
							className="h-auto p-0 font-medium"
						>
							Date Added
							{column.getIsSorted() === "asc" ? (
								<ChevronUp className="ml-2 h-4 w-4" />
							) : column.getIsSorted() === "desc" ? (
								<ChevronDown className="ml-2 h-4 w-4" />
							) : (
								<ChevronsUpDown className="ml-2 h-4 w-4" />
							)}
						</Button>
					);
				},
				cell: ({ getValue }) => (
					<span className="text-muted-foreground text-sm font-inter">
						{formatDate(getValue() as string)}
					</span>
				),
				enableGlobalFilter: false,
			},
			{
				accessorKey: "status",
				header: ({ column }) => {
					return (
						<div className="text-center w-full">
							<Button
								variant="ghost"
								onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
								className="h-auto p-0 font-medium"
							>
								Status
								{column.getIsSorted() === "asc" ? (
									<ChevronUp className="ml-2 h-4 w-4" />
								) : column.getIsSorted() === "desc" ? (
									<ChevronDown className="ml-2 h-4 w-4" />
								) : (
									<ChevronsUpDown className="ml-2 h-4 w-4" />
								)}
							</Button>
						</div>
					);
				},
				cell: ({ row }) => (
					<div className="text-center">
						{getStatusIcon(row.original)}
					</div>
				),
				enableGlobalFilter: false,
			},
			{
				id: "actions",
				header: () => (
					<div className="text-center w-full">
						Actions
					</div>
				),
				cell: ({ row }) => {
					const file = row.original;
					return (
						<div className="text-center">
							<Popover
								open={openPopovers[file.id] || false}
								onOpenChange={(open) =>
									setOpenPopovers((prev) => ({
										...prev,
										[file.id]: open,
									}))
								}
							>
								<PopoverTrigger asChild>
									<Button
										variant="ghost"
										size="sm"
										className="h-8 w-8 sm:h-9 sm:w-9 p-0 cursor-pointer"
									>
										<MoreVertical className="h-5 w-5" />
									</Button>
								</PopoverTrigger>
								<PopoverContent className="w-40 bg-white dark:bg-carbon-800 border-carbon-200 dark:border-carbon-700 p-1">
									<div className="space-y-1">
										{file.status === "completed" && (
											<Button
												variant="ghost"
												size="sm"
												className="w-full justify-start h-8 text-sm hover:bg-carbon-100 dark:hover:bg-carbon-700 cursor-pointer"
												onClick={() => {
													setOpenPopovers((prev) => ({ ...prev, [file.id]: false }));
													navigate({ path: 'chat', params: { audioId: file.id } });
												}}
											>
												<MessageCircle className="mr-2 h-4 w-4" />
												Open Chat
											</Button>
										)}
										<Button
											variant="ghost"
											size="sm"
											className="w-full justify-start h-8 text-sm hover:bg-carbon-100 dark:hover:bg-carbon-700 cursor-pointer disabled:cursor-not-allowed"
											disabled={!canTranscribe(file)}
											onClick={() => handleTranscribeD(file.id)}
										>
											<QuickTranscribeIcon className="mr-2 h-4 w-4" />
											Transcribe
										</Button>

										<Button
											variant="ghost"
											size="sm"
											className="w-full justify-start h-8 text-sm hover:bg-carbon-100 dark:hover:bg-carbon-700 cursor-pointer disabled:cursor-not-allowed"
											disabled={!canTranscribe(file)}
											onClick={() => handleTranscribe(file.id)}
										>
											<AdvancedTranscribeIcon className="mr-2 h-4 w-4" />
											Transcribe+
										</Button>

										{file.status === "processing" && (
											<Button
												variant="ghost"
												size="sm"
												className="w-full justify-start h-8 text-sm hover:bg-carbon-100 dark:hover:bg-carbon-700 text-orange-500 dark:text-orange-400 hover:text-orange-600 dark:hover:text-orange-300 cursor-pointer"
												disabled={killingJobs.has(file.id)}
												onClick={() => {
													setSelectedFile(file);
													setStopDialogOpen(true);
												}}
											>
												{killingJobs.has(file.id) ? (
													<>
														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
														Stopping...
													</>
												) : (
													<>
														<StopCircle className="mr-2 h-4 w-4" />
														Stop
													</>
												)}
											</Button>
										)}

										<Button
											variant="ghost"
											size="sm"
											className="w-full justify-start h-8 text-sm hover:bg-carbon-100 dark:hover:bg-carbon-700 text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 cursor-pointer"
											onClick={() => {
												setSelectedFile(file);
												setDeleteDialogOpen(true);
											}}
										>
											<Trash2 className="mr-2 h-4 w-4" />
											Delete
										</Button>
									</div>
								</PopoverContent>
							</Popover>
						</div>
					);
				},
				enableSorting: false,
				enableGlobalFilter: false,
			},
		],
		[openPopovers, queuePositions, trackProgress, getStatusIcon, handleAudioClick, handleTranscribe, handleTranscribeD, canTranscribe, getFileName, killingJobs, setSelectedFile, setStopDialogOpen, setDeleteDialogOpen]
	);

	// Create the table instance with server-side pagination and search
	const table = useReactTable({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
		getSortedRowModel: getSortedRowModel(),
		onSortingChange: setSorting,
		onColumnFiltersChange: setColumnFilters,
		onGlobalFilterChange: setGlobalFilter,
		onRowSelectionChange: setRowSelection,
		onPaginationChange: setPagination,
		manualPagination: true,
		manualSorting: true,
		manualFiltering: true,
		pageCount: pageCount,
		state: {
			sorting,
			columnFilters,
			globalFilter,
			rowSelection,
			pagination,
		},
		getRowId: row => row.id, // Use ID for selection
	});

	const selectedCount = Object.keys(rowSelection).length;

	// Create the table instance with server-side pagination and search
	if (loading) {
		return (
			<div className="space-y-4">
				{/* Bulk Actions Toolbar */}
				{selectedCount > 0 && (
					<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-lg rounded-full px-6 py-3 flex items-center gap-4 animate-in slide-in-from-bottom-5 fade-in duration-300">
						<span className="text-sm font-medium text-zinc-600 dark:text-zinc-400 border-r border-zinc-200 dark:border-zinc-800 pr-4">
							{selectedCount} selected
						</span>

						<div className="flex items-center gap-2">
							<Button
								variant="ghost"
								size="sm"
								onClick={() => setConfigDialogOpen(true)}
								disabled={bulkActionLoading}
								className="h-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
							>
								<QuickTranscribeIcon className="mr-2 h-4 w-4" />
								Transcribe
							</Button>

							<Button
								variant="ghost"
								size="sm"
								onClick={() => setTranscribeDDialogOpen(true)}
								disabled={bulkActionLoading}
								className="h-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
							>
								<AdvancedTranscribeIcon className="mr-2 h-4 w-4" />
								Transcribe+
							</Button>

							<div className="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1" />

							<Button
								variant="ghost"
								size="sm"
								onClick={() => setBulkDeleteDialogOpen(true)}
								disabled={bulkActionLoading}
								className="h-8 rounded-full text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
							>
								<Trash2 className="mr-2 h-4 w-4" />
								Delete
							</Button>
						</div>

						<Button
							variant="ghost"
							size="icon"
							onClick={() => setRowSelection({})}
							className="h-6 w-6 rounded-full ml-2 hover:bg-zinc-100 dark:hover:bg-zinc-800"
						>
							<XCircle className="h-4 w-4 text-zinc-400" />
						</Button>
					</div>
				)}
				<div className="glass-card rounded-xl p-6">
					<div className="animate-pulse">
						<div className="h-4 bg-muted rounded w-1/4 mb-6"></div>
						<div className="space-y-3">
							{[...Array(5)].map((_, i) => (
								<div
									key={i}
									className="h-12 bg-muted/50 rounded-lg"
								></div>
							))}
						</div>
					</div>
				</div>
			</div>
		);
	}

	return (
		<div className="space-y-4">
			{/* Bulk Actions Toolbar */}
			{selectedCount > 0 && (
				<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-lg rounded-full px-6 py-3 flex items-center gap-4 animate-in slide-in-from-bottom-5 fade-in duration-300">
					<span className="text-sm font-medium text-zinc-600 dark:text-zinc-400 border-r border-zinc-200 dark:border-zinc-800 pr-4">
						{selectedCount} selected
					</span>

					<div className="flex items-center gap-2">
						<Button
							variant="ghost"
							size="sm"
							onClick={() => setTranscribeDDialogOpen(true)}
							disabled={bulkActionLoading}
							className="h-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
						>
							<QuickTranscribeIcon className="mr-2 h-4 w-4" />
							Transcribe
						</Button>

						<Button
							variant="ghost"
							size="sm"
							onClick={() => setConfigDialogOpen(true)}
							disabled={bulkActionLoading}
							className="h-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
						>
							<AdvancedTranscribeIcon className="mr-2 h-4 w-4" />
							Transcribe+
						</Button>

						<div className="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1" />

						<Button
							variant="ghost"
							size="sm"
							onClick={() => setBulkDeleteDialogOpen(true)}
							disabled={bulkActionLoading}
							className="h-8 rounded-full text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
						>
							<Trash2 className="mr-2 h-4 w-4" />
							Delete
						</Button>
					</div>

					<Button
						variant="ghost"
						size="icon"
						onClick={() => setRowSelection({})}
						className="h-6 w-6 rounded-full ml-2 hover:bg-zinc-100 dark:hover:bg-zinc-800"
					>
						<XCircle className="h-4 w-4 text-zinc-400" />
					</Button>
				</div>
			)}
			<div className="glass-card rounded-xl overflow-hidden">
				<div className="p-3 sm:p-6">
					<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0 mb-4">
						<div>
							<h2 className="text-xl font-semibold text-carbon-900 dark:text-carbon-50 mb-2">
								Audio Files
							</h2>
							<p className="text-carbon-600 dark:text-carbon-400 text-sm">
								{globalFilter
									? `${totalItems} file${totalItems !== 1 ? "s" : ""} found`
									: `${totalItems} file${totalItems !== 1 ? "s" : ""} total`
								}
							</p>
						</div>

						{/* Global Search */}
						<div className="relative w-full sm:w-72">
							<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-carbon-400 h-4 w-4 z-10" />
							<DebouncedSearchInput
								placeholder="Search audio files..."
								value={globalFilter ?? ""}
								onChange={setGlobalFilter}
								className="pl-10 bg-carbon-50 dark:bg-carbon-800 border-border focus:bg-background transition-colors"
							/>
						</div>
					</div>

					{data.length === 0 && !loading ? (
						<div className="p-12 text-center">
							<div className="text-5xl mb-4 opacity-50">🎵</div>
							<h3 className="text-lg font-medium text-carbon-600 dark:text-carbon-300 mb-2">
								{globalFilter ? "No matching audio files" : "No audio files yet"}
							</h3>
							<p className="text-carbon-500 dark:text-carbon-400">
								{globalFilter
									? "Try adjusting your search terms"
									: "Upload your first audio file to get started"
								}
							</p>
						</div>
					) : (
						<>
							{/* Table */}
							<div className={`border border-carbon-100 dark:border-carbon-900 rounded-lg overflow-hidden relative transition-opacity duration-200 ${isPageChanging ? 'opacity-75' : ''}`}>
								{isPageChanging && (
									<div className="absolute inset-0 bg-white/20 dark:bg-carbon-800/20 flex items-center justify-center z-10">
										<div className="flex items-center space-x-2 text-carbon-600 dark:text-carbon-400 bg-white dark:bg-carbon-800 px-3 py-1 rounded-md shadow-sm">
											<Loader2 className="h-4 w-4 animate-spin" />
											<span className="text-sm">Loading...</span>
										</div>
									</div>
								)}
								<Table>
									<TableHeader className="hidden sm:table-header-group">
										{table.getHeaderGroups().map((headerGroup) => (
											<TableRow
												key={headerGroup.id}
												className="bg-carbon-100 dark:bg-carbon-800 hover:bg-carbon-200 dark:hover:bg-carbon-700 border-b border-border group/header"
											>
												{headerGroup.headers.map((header) => (
													<TableHead
														key={header.id}
														className={`text-carbon-700 dark:text-carbon-300 ${header.column.id === 'created_at' ? 'hidden sm:table-cell' : ''} ${header.column.id === 'title' ? 'w-full' : ''} ${header.column.id === 'status' ? 'w-10 text-center' : ''} ${header.column.id === 'actions' ? 'w-10 text-center lg:hidden' : ''} ${header.column.id === 'select' ? 'w-[40px] px-2' : ''}`}
													>
														{header.isPlaceholder
															? null
															: flexRender(
																header.column.columnDef.header,
																header.getContext()
															)}
													</TableHead>
												))}
											</TableRow>
										))}
									</TableHeader>
									<TableBody>
										{table.getRowModel().rows?.length ? (
											table.getRowModel().rows.map((row) => (
												<TableRow
													key={row.id}
													className="hover:bg-carbon-50 dark:hover:bg-carbon-800 transition-colors duration-200 border-b border-border last:border-b-0 group/row h-14"
													data-state={row.getIsSelected() && "selected"}
												>
													{row.getVisibleCells().map((cell) => (
														<TableCell
															key={cell.id}
															className={`
																${cell.column.id === 'created_at' ? 'hidden sm:table-cell' : ''}
																${cell.column.id === 'title' ? 'whitespace-normal break-words pr-1 sm:pr-2' : ''}
																${cell.column.id === 'status' ? 'w-[36px] px-1 text-center' : ''}
																${cell.column.id === 'actions' ? 'w-[36px] px-1 text-center lg:hidden' : ''}
																${cell.column.id === 'select' ? 'w-[40px] px-2' : ''}
															`}
														>
															{flexRender(
																cell.column.columnDef.cell,
																cell.getContext()
															)}
														</TableCell>
													))}
												</TableRow>
											))
										) : (
											<TableRow>
												<TableCell
													colSpan={columns.length}
													className="h-24 text-center"
												>
													No results.
												</TableCell>
											</TableRow>
										)}
									</TableBody>
								</Table>
							</div>

							{/* Pagination */}
							<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0 px-2 py-4">
								<div className="flex items-center space-x-2">
									<p className="text-sm text-carbon-600 dark:text-carbon-400">
										{globalFilter ? (
											`Showing ${pagination.pageIndex * pagination.pageSize + 1} to ${Math.min(
												(pagination.pageIndex + 1) * pagination.pageSize,
												totalItems
											)} of ${totalItems} entries (filtered)`
										) : (
											`Showing ${pagination.pageIndex * pagination.pageSize + 1} to ${Math.min(
												(pagination.pageIndex + 1) * pagination.pageSize,
												totalItems
											)} of ${totalItems} entries`
										)}
									</p>
								</div>
								<div className="flex items-center space-x-2">
									<Button
										variant="outline"
										size="sm"
										onClick={() => table.setPageIndex(0)}
										disabled={!table.getCanPreviousPage()}
										className="text-carbon-600 dark:text-carbon-400"
									>
										<ChevronsLeft className="h-4 w-4" />
									</Button>
									<Button
										variant="outline"
										size="sm"
										onClick={() => table.previousPage()}
										disabled={!table.getCanPreviousPage()}
										className="text-carbon-600 dark:text-carbon-400"
									>
										<ChevronLeft className="h-4 w-4" />
									</Button>
									<span className="text-sm text-carbon-600 dark:text-carbon-400">
										Page {table.getState().pagination.pageIndex + 1} of{" "}
										{pageCount}
									</span>
									<Button
										variant="outline"
										size="sm"
										onClick={() => table.nextPage()}
										disabled={!table.getCanNextPage()}
										className="text-carbon-600 dark:text-carbon-400"
									>
										<ChevronRight className="h-4 w-4" />
									</Button>
									<Button
										variant="outline"
										size="sm"
										onClick={() => table.setPageIndex(pageCount - 1)}
										disabled={!table.getCanNextPage()}
										className="text-carbon-600 dark:text-carbon-400"
									>
										<ChevronsRight className="h-4 w-4" />
									</Button>
								</div>
							</div>
						</>
					)}
				</div>
			</div>

			{/* Transcription Config Dialog (reused for bulk) */}
			<TranscriptionConfigDialog
				open={configDialogOpen}
				onOpenChange={setConfigDialogOpen}
				onStartTranscription={onStartTranscribe}
				loading={transcriptionLoading || bulkActionLoading}
				title={selectedCount > 0 ? `Transcribe ${selectedCount} Files` : undefined}
			/>

			{/* Transcribe-D Dialog (reused for bulk) */}
			<TranscribeDDialog
				open={transcribeDDialogOpen}
				onOpenChange={setTranscribeDDialogOpen}
				onStartTranscription={onStartTranscribeWithProfile}
				loading={transcriptionLoading || bulkActionLoading}
				title={selectedCount > 0 ? `Transcribe+ ${selectedCount} Files` : undefined}
			/>

			{/* Bulk Delete Confirmation */}
			<AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>Delete {selectedCount} Files?</AlertDialogTitle>
						<AlertDialogDescription>
							This action cannot be undone. This will permanently delete the selected audio files and their transcripts.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel>Cancel</AlertDialogCancel>
						<AlertDialogAction
							onClick={handleBulkDelete}
							className="bg-red-600 hover:bg-red-700 text-white"
						>
							{bulkActionLoading ? (
								<>
									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
									Deleting...
								</>
							) : (
								"Delete Files"
							)}
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
			{/* Stop Transcription Dialog */}
			<AlertDialog open={stopDialogOpen} onOpenChange={setStopDialogOpen}>
				<AlertDialogContent className="bg-white dark:bg-carbon-800 border-carbon-200 dark:border-carbon-700">
					<AlertDialogHeader>
						<AlertDialogTitle className="text-carbon-900 dark:text-carbon-100">
							Stop Transcription
						</AlertDialogTitle>
						<AlertDialogDescription className="text-carbon-600 dark:text-carbon-400">
							Are you sure you want to stop the transcription of "
							{selectedFile?.title || (selectedFile ? getFileName(selectedFile.audio_path) : "")}
							"? This will cancel the current transcription process.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel className="bg-carbon-100 dark:bg-carbon-800 border-carbon-300 dark:border-carbon-600 text-carbon-700 dark:text-carbon-200 hover:bg-carbon-200 dark:hover:bg-carbon-700">
							Cancel
						</AlertDialogCancel>
						<AlertDialogAction
							className="bg-orange-600 text-white hover:bg-orange-700"
							onClick={() => {
								if (selectedFile) {
									handleKillJob(selectedFile.id);
								}
								setStopDialogOpen(false);
							}}
						>
							Stop Transcription
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>

			{/* Delete Audio File Dialog */}
			<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
				<AlertDialogContent className="bg-white dark:bg-carbon-800 border-carbon-200 dark:border-carbon-700">
					<AlertDialogHeader>
						<AlertDialogTitle className="text-carbon-900 dark:text-carbon-100">
							Delete Audio File
						</AlertDialogTitle>
						<AlertDialogDescription className="text-carbon-600 dark:text-carbon-400">
							Are you sure you want to delete "
							{selectedFile?.title || (selectedFile ? getFileName(selectedFile.audio_path) : "")}
							"? This action cannot be undone and will
							permanently remove the audio file and any
							transcription data.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel className="bg-carbon-100 dark:bg-carbon-800 border-carbon-300 dark:border-carbon-600 text-carbon-700 dark:text-carbon-200 hover:bg-carbon-200 dark:hover:bg-carbon-700">
							Cancel
						</AlertDialogCancel>
						<AlertDialogAction
							className="bg-red-600 text-white hover:bg-red-700"
							onClick={() => {
								if (selectedFile) {
									handleDelete(selectedFile.id);
								}
								setDeleteDialogOpen(false);
							}}
						>
							Delete
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
		</div>
	);
});
